<template>
  <div class="panorama-container" p>
    <div id="panorama-top" style="height: 30px;text-align: right;">
      <el-button style="margin: 20px"
                 type="primary" size="small" @click="jump2Panorama2('resp')">
        查看我的岗位合规清单
      </el-button>
      <el-button style="margin: 20px"
                 type="primary" size="small" @click="jump2Panorama2('all')">
        查看所有岗位合规清单
      </el-button>
    </div>

    <div id="panorama-main" class="panoramaSunburst-main"></div>

    
    <!-- 引导提示 -->
    <overlay :visible.sync="dialogVisible" @update:visible="closeOverlay" class="guide-wrap">
      <template v-if="dialogVisible">
        <div class="guide-wrap-inner btn-wrap" slot="content">
          <el-button
            style="margin: 20px"
            type="primary" size="small">
            查看我的岗位合规清单
          </el-button>
          <el-button
            style="margin: 20px"
            type="primary" size="small">
            查看所有岗位合规清单
          </el-button>
        </div>
        <div class="guide-wrap-inner tip-1" slot="content">
          <span class="tip-text">点击查看您的岗位合规风险清单</span>
          <img class="img-right" src="../assets/images/tip/path1.png"/>
        </div>

        <div class="guide-wrap-inner tip-2" slot="content">
          <span class="tip-text">点击查看所有岗位合规风险清单</span>
          <img class="img-right" src="../assets/images/tip/path2.png"/>
        </div>

        <div class="guide-wrap-inner tip-3" slot="content">
          <img class="img-left" src="../assets/images/tip/path3.png"/>
          <span class="tip-text">点击查看具体领域合规风险清单</span>
        </div>

        <div class="guide-wrap-inner btn-bottom" slot="content">
          <el-button round @click="closeOverlay">知道了</el-button>
        </div>
      </template>
    </overlay>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import API from "components/api-chat-window";
import overlay from "components/overlay";

export default {
  name: 'panorama-container',
  data() {
    return {
      byDept: true,
      dialogVisible: false,
      showParent: true,
      answer: {},
      talkSessionId: '',
      pageHeight: 0,
      fontLength: 1,
      levelsNum: 1,
      areas: "",
      totalValue: 100
    }
  },
  components: {
    overlay
  },
  methods: {
    openDetail(param) {
      if (param.data.type === 'queName' && param.data.bankNo !== undefined) {
        let routeData = this.$router.resolve({
          path: "/riskDetail",
          query: {bankNo: param.data.bankNo}
        });
        window.open(routeData.href, '_blank')
      }
    },
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      let dom = document.getElementById('panorama-main');
      let vue = this;
      let myChart = echarts.init(dom);
      vue.myChart = myChart;
      this.fontLength = 14;
      this.levelsNum = 2;
      myChart.on('click', this.openDetail);
      myChart.on('click', function (param) {
        //获取到领域
        let element = param.treePathInfo[1];
        let areas = element.name || "";
        if (vue.showParent) {
          this.fontLength = 14;
          this.levelsNum = 3;
          areas = areas.replaceAll("\n", "");
          vue.areas = areas;
          API.getQaBankTreeInfo({'type': 'panorama', 'areas': areas}).then(res => {
            let data = res.data;
            vue.showParent = !vue.showParent;
            data = data.children;
            let option = myChart.getOption();
            data[0].name += '\n\n\n\n\n';//让在中心的领域文字长在中间
            option.series[0].data = data;
            option.series[0].levels = [
              {},
              {r0: "0%", r: "18%", label: {rotate: 0}},
              {r0: "18%", r: "53%"},
              {r0: "53%", r: "95%"}
            ];
            option.series[0].label.fontSize = vue.calculateFontSize();
            myChart.setOption(option);
          });
        } else {
          if (param.name === areas) {
            vue.areas = "";
            this.fontLength = 14;
            this.levelsNum = 2;
            API.getQaBankTreeInfo({'type': 'panorama'}).then(res => {
              let data = res.data;
              vue.showParent = !vue.showParent;
              data = data.children;
              let option = myChart.getOption();
              let series = option.series[0];
              series.data = data;
              series.levels = vue.parentLevelsStyle();
              series.label.fontSize = vue.calculateFontSize();
              myChart.setOption(option);
            });
          }
        }
      });
      API.getQaBankTreeInfo({'type': 'panorama'}).then(res => {
        myChart.hideLoading();
        if (res.result === "1" && res.data) {
          let data = res.data;
          //如果当前岗位没有数据的话转为全部
          if (data == null || data.children.length === 0) {
            this.triggerDept();
            return;
          }
          data = data.children;
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption({
            tooltip: {
              trigger: 'item',
              triggerOn: 'mousemove',
              formatter: function (data) {
                //悬浮框函数
                let dataName = data.name;
                let name = "";
                let i = 1;
                let length = 30;
                while (i * length < dataName.length) {
                  name += dataName.substr((i - 1) * length, length) + "<br/>";
                  i++;
                }
                name += dataName.substr((i - 1) * length);
                return name;
              }
            },
            series: [
              {
                type: 'sunburst',
                data: data,
                radius: [0, '93%'],
                levels: vue.parentLevelsStyle(),
                label: {
                  color: 'white',
                  fontSize: vue.calculateFontSize(),
                  formatter: function (params) {
                    // console.log(params);
                    let name = params.name;
                    //debugger;
                    let split = name.split("\n");
                    let endLine = split[split.length - 1];
                    let endLineLength = endLine.length;
                    let s = "";
                    //在末尾行文字过少时增加文字间隔
                    if (endLineLength < 3) {
                      s = "     ";
                    } else if (endLineLength < 5) {
                      s = "   ";
                    } else if (endLineLength < 7) {
                      s = " ";
                    }
                    split[split.length - 1] = endLine.split("").join(s);
                    name = split.join("\n");
                    return name;
                  }
                },
                emphasis: {
                  focus: 'ancestor'
                },
                nodeClick: false,
              }
            ],
          });
        }
      })
    },
    /**
     * 取到当前页面的高度，再重新设置旭日图的尺寸
     */
    reSetSize() {
      let height = document.querySelector("html").clientHeight;
      this.pageHeight = height;
      document.querySelector("#panorama-top")
          .setAttribute("style", `height:${height * 0.05}px;text-align: right;`);
      document.querySelector("#panorama-main")
          .setAttribute("style", `height:${height * 0.85}px;width:${height * 0.85 * 2}px`);
    },
    calculateFontSize() {
      //屏幕高度*0.7*半径0.5/扇区层级/文字数量
      return (this.pageHeight * 0.45) / this.levelsNum / this.fontLength;
    },
    jump2Panorama2(type) {
      this.$router.push({path: '/panorama2', query: {type: type}});
    },
    parentLevelsStyle() {
      return [
        {},
        {
          r0: "0%", r: "67%",
          label: {
            fontSize: this.calculateFontSize() * 1.2
          }
        },
        {r0: "56%", r: "95%"}
      ]
    },
    initShowOverlay() {
      API.showOperationGuide().then(res => {
        this.dialogVisible = res.data || false;
      });
    },
    closeOverlay() {
      this.dialogVisible = false;
      API.setShowedOperationGuide();
    }
  },
  created() {
    window.panorama = this;
    this.initShowOverlay();
  },
  mounted() {
    document.getElementsByTagName("body")[0].className = "panorama-background panoramaSunburst-background";
    this.reSetSize();
    this.myEcharts();
    window.onresize = () => {
      panorama.reSetSize();
      //刷新echarts
      let myChart = panorama.myChart;
      let option = myChart.getOption();
      let series = option.series[0];
      if (this.areas === "") {
        series.levels = this.parentLevelsStyle()
      }
      series.label.fontSize = panorama.calculateFontSize();
      myChart.setOption(option);
      myChart.resize();
    }
  }
}
</script>
<style>
  .guide-wrap {
    font-size: 18px;
    color: #fff;
  }
  .guide-wrap .guide-wrap-inner {
    position: absolute;
  }
  .guide-wrap .guide-wrap-inner .tip-text {
    position: relative;
    top: 6px;
    margin: 0 8px;
  }
  .guide-wrap .btn-wrap {
    position: absolute;
    top: 0;
    right: 0;
  }
  .guide-wrap .tip-1 {
    top: 80px;
    right: 248px;
  }
  .guide-wrap .tip-2 {
    top: 80px;
    right: 80px;
  }
  .guide-wrap .tip-3 {
    top: 60%;
    left: 60%;
  }
  .guide-wrap .btn-bottom {
    bottom: 10%;
    right: 100px;
  }
  .guide-wrap .btn-bottom .el-button {
    color: #fff;
  }
  .guide-wrap .btn-bottom .el-button,
  .guide-wrap .btn-bottom .el-button:hover {
    background: none;
  }
  </style>